<template>
  <div class="box">
    <h3>组织架构</h3>
    <div class="top_box">
      部门名称：<el-input
        v-model="deptName"
        style="width: 240px"
        placeholder="请输入"
      />
      <el-button class="query" @click="query">查询</el-button>
      <el-button @click="reset">重置</el-button>
      <span class="add">
        <el-button type="primary" @click="save(0, '顶级部门')">添加</el-button>
      </span>
    </div>

    <el-table
      :data="depts"
      border
      style="width: 100%"
      row-key="id"
      lazy
      :load="load"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column type="index" width="100" label="序号" align="center" />
      <el-table-column
        prop="name"
        label="部门名称"
        align="center"
        width="160"
      />
      <el-table-column prop="createTime" label="创建时间" align="center" />
      <el-table-column prop="status" label="状态" align="center" width="160">
        <template #default="{ row }">
          <el-switch
            v-model="row.status"
            class="ml-2"
            :active-value="1"
            :inactive-value="0"
            @change="chg(row.id, row.status)"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="260"
        header-align="center"
        align="center"
      >
        <template #default="{ row }">
          <el-button
            type="primary"
            :icon="Plus"
            circle
            @click="save(row.id, row.name)"
          />
          <el-button
            type="primary"
            :icon="Edit"
            circle
            @click="save(row.parentid, row.parentName, row.id, row.name)"
          />
          <el-button type="danger" :icon="Delete" circle @click="del(row.id)" />
        </template>
      </el-table-column>
    </el-table>
    <UpdateOrSave
      ref="updateDept"
      :visible="isShow"
      @close="isShow = false"
      @reflush="init()"
    />
  </div>
</template>
<script setup>
import { onBeforeMount, ref } from "vue";
import { getDepts, updateStatus, deleteDept } from "@/api/system/dept.js";
import { ElMessage, ElMessageBox } from "element-plus";
import { Plus, Delete, Edit } from "@element-plus/icons-vue";
import UpdateOrSave from "./updateOrSave.vue";

const deptName = ref("");

const depts = ref([]);

//监听子组件关闭事件
const isShow = ref(false);

const updateDept = ref(null);

//初始化，页面加载时获取数据
async function init() {
  let res = await getDepts({ name: deptName.value, parentid: 0 });
  depts.value = res.data;
}

async function load(row, treeNode, resolve) {
  let params = {
    parentid: row.id
  };
  let res = await getDepts(params);
  resolve(res.data);
}

async function chg(id, status) {
  let res = await updateStatus(id, status);
  if (res.code == 200) {
    ElMessage({
      message: "修改成功",
      type: "success"
    });
    init();
  }
}

function save(pid, pname, id, name) {
  updateDept.value.init(pid, pname, id, name);
  isShow.value = true;
}

//删除
function del(id) {
  ElMessageBox.confirm("你确定要删除吗?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(() => {
      todel(id);
    })
    .catch(() => {});
}
async function todel(id) {
  let res = await deleteDept(id);
  if (res.code == 200) {
    ElMessage({
      type: "success",
      message: "删除成功"
    });
  }
}
//查询
async function query() {
  let res = await getDepts({ name: deptName.value });
  if (res.code == 200) {
    depts.value = res.data;
  }
}
//重置
function reset() {
  deptName.value = "";
  init();
}
onBeforeMount(() => {
  init();
});
</script>
<style scoped>
.top_box {
  padding-top: 20px;
  width: 100%;
  height: 70px;
  background: #fff;
  padding-left: 50px;
  margin-bottom: 20px;
}
h3 {
  font-size: 16px;
  font-weight: normal;
  margin-top: 0;
  margin-bottom: 20px;
}
.add {
  float: right;
  margin-right: 20px;
}
.query {
  margin-left: 10px;
}
</style>
